import React, { useState, useEffect } from 'react'
import SearchBar from '@/components/SearchBar'
import "./index.scss"
import StickyBox from 'react-sticky-box';
import { Tabs, Card, Flex, Typography, Divider, Pagination, Space, Spin, Empty, App } from 'antd'
import FirmLogo from '@/components/FirmLogo';
import TagsCom from '@/components/TagsCom';
import riskTitle from '@/assets/images/enterprise/lishi@2x.png'
import { useNavigate, useLocation } from 'react-router-dom';
import { searchAPI } from '@/apis';
const { Paragraph } = Typography
const items = [
    {
        key: '1',
        label: '全部',
        children: '',
    },
    {
        key: '2',
        label: '客商画像',
        children: '',
    },
    {
        key: '3',
        label: '风险分析',
        children: '',
    },
    {
        key: '4',
        label: '交易特征',
        children: '',
    },
    {
        key: '5',
        label: '结算偏好',
        children: '',
    },
    {
        key: '6',
        label: '数据流水',
        children: '',
    },
    {
        key: '7',
        label: '报告下载',
        children: '',
    }
];
const results = [
    {
        key: '1',
        label: '法定代表人',
        children: '赵利',
    },
    {
        key: '2',
        label: '注册资本',
        children: '10,500万(元)',
    },
    {
        key: '3',
        label: '成立时间',
        children: '1996-04-17',
    },
    {
        key: '4',
        label: '电话',
        children: '029-8360****',
    },
    {
        key: '5',
        label: '统一社会信用代码',
        children: '91610500694920759Q',
    },
];
export default function SearchResult() {
    const navigate = useNavigate()
    const { state } = useLocation()
    const [searchVal, setSearchVal] = useState({
        input: state.searchInput,
        type: state.searchType
    })
    const [page, setPage] = useState({
        pageNum: 1,
        pageSize: 10
    })
    const companyType = localStorage.getItem("company_type")??''
    const [list, setList] = useState([])
    const [totalnum, setTotalnum] = useState(0)
    const [isloading, setisloading] = useState(false)
    const { message } = App.useApp()
    const onFinish = (values) => {
        if (values && values.name) {
            setSearchVal(prev => ({
                ...prev,
                input: values.name,
                type: values.type
            }))
        } else {
            message.open({
                type: 'error',
                content: '请输入要搜索的企业名称'
            })
        }
    }
    const renderTabBar = (props, DefaultTabBar) => (
        <DefaultTabBar className="typeTabs" {...props} style={{
            backgroundColor: '#f9f9f9',
            paddingLeft: 24
        }} />
    )
    const firmNameF = (firm) => {
        const _new = firm.split(searchVal)
        _new.forEach((item, index) => {
            if (index !== 0) {
                _new.splice(index, 0, searchVal)
            }
        })
        return _new
    }
    const handlepagechange = (page, pageSize) => {
        setPage({
            pageNum: page,
            pageSize: pageSize
        })
    }
    useEffect(() => {
        function getResult() {
            setisloading(true)
            searchAPI({
                searchInput: searchVal.input,
                searchType: searchVal.type,
                searchCompanyType: companyType,
                ...page
            }).then(res => {
                for (let i = 0; i < res.data.results.length; i++) {
                    let tags = [];
                    if (res.data.results[i].IS_XWQY) {
                        tags.push('小微企业')
                    }
                    if (res.data.results[i].IS_MYGS) {
                        tags.push('贸易公司')
                    }
                    if (res.data.results[i].IS_CYDW == 1) {
                        tags.push('下级成员单位')
                    }else if (res.data.results[i].IS_CYDW == 2) {
                        tags.push('二级成员单位')
                    }else if (res.data.results[i].IS_CYDW == 3) {
                        tags.push('集团')
                    }
                    tags.push(res.data.results[i].DJZT)
                    res.data.results[i].tags = tags
                }
                setisloading(false)
                setList(res.data.results)
                setTotalnum(res.data.total)
            })
        }
        getResult()
    }, [searchVal, page])
    const handleClick = (company) => {
        navigate(`/searchEnterprise?company=${company}`, {
            state: {
                route: `企业画像/搜索/搜索结果/${company}`,
                searchInput: company
            }
        })
    }
    return (

        <div className="result-container">
            <StickyBox offsetTop={-16} style={{ zIndex: 10 }}>
                <div className="search-wrap">
                    <SearchBar onFinish={onFinish} showPreloadButton={false}></SearchBar>
                </div>
                {/* <Tabs size="large" renderTabBar={renderTabBar} defaultActiveKey="1" items={items} ></Tabs> */}
            </StickyBox>
            <Spin tip="页面加载中..." spinning={isloading} size='large'>
                <Flex gap={20} style={{ padding: '0 20px' }} align="flex-start">
                    <Card className="results" style={{ flex: 1 }} title={<h5>为您找到 <span style={{ color: '#F93920' }}>{totalnum}</span> 条相关结果</h5>}>
                        {searchVal && !isloading && list.length === 0 ? <Empty description='未查询到相关数据' image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty> : <>{list.map(item => <div key={item.ID} className="item" onClick={() => handleClick(item.GSMC)}>
                            <Flex gap='0 16px' align="flex-start">
                                <FirmLogo name={item.GSMC.slice(0, 4)}></FirmLogo>
                                <Flex gap='12px 0' vertical style={{ flex: 1 }} className='firm-intro'>
                                    <h3>{firmNameF(item.GSMC).map((item, index) => item === searchVal ? <span key={index} style={{ color: '#F93920' }}>{item}</span> : <span key={index}>{item}</span>)}</h3>
                                    <TagsCom tags={item.tags}></TagsCom>
                                    <Flex wrap gap="5px 24px">
                                        <p>法定代表人:{item.FDDBR}</p>
                                        <p>注册资本:{item.ZZZB}</p>
                                        <p>存续状态:{item.DJZT}</p>
                                        <p>成立时间:{item.CLRQ}</p>
                                        <p>核准日期:{item.HZRQ}</p>
                                        <p>是否成员单位:{item.IS_CYDW === 1 ? '是' : '否'}</p>
                                        <p>电话:{item.LXDH}</p>
                                        <p>统一社会信用代码:{item.TYSHXYDM}</p>
                                        <p>邮箱:{item.YX}</p>
                                        <p>地址:{item.ZCDZ}</p>
                                        <Paragraph ellipsis={{
                                            rows: 1,
                                            expandable: 'collapsible',
                                        }}>经营范围:{item.JYFW}</Paragraph>
                                    </Flex>
                                    <Space>
                                        <Flex className="risk" align="center">
                                            <img src={riskTitle} alt="" />
                                            <p><span style={{ color: '#F93920' }}>{item.risk_total}</span>条</p>
                                        </Flex>
                                    </Space>
                                </Flex>
                            </Flex>
                            <Divider />
                        </div>)}
                            <Pagination total={totalnum}
                                showSizeChanger
                                showQuickJumper
                                onChange={handlepagechange}
                                showTotal={(total) => `共 ${total} 条`}></Pagination></>}

                    </Card>

                    {/* <Card className="correlation" title={<h5>相关搜索</h5>} style={{ width: 310 }}>
                    <Space gap="12px 0" style={{ width: '100%' }} direction="vertical">
                        {results.map(item => <div key={item.key} className="item">
                            <Paragraph style={{ width: '100%' }} ellipsis={true}>{firmNameF(firmName).map(item => item === searchVal ? <span key={item} style={{ color: '#F93920' }}>{item}</span> : <span key={item}>{item}</span>)}</Paragraph>
                        </div>)}
                    </Space>
                </Card> */}
                </Flex>
            </Spin>
        </div>

    )
}
